<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery/jquery.min.js"></script>
</head>
<body>
    <ul>
        <a href="#">演示</a>
        <li price="11">1</li>
        <li price="22">2</li>
        <li id="three">3</li>
        <li price="1214">4<a href="#">百度</a></li>
        <li price="12">4</li>
    </ul>
    <a href="#">程序员网</a>


    <div></div>
    <div class="a">
        <p></p>
    </div>

    <script>
        //后代选择器
        // $(function(){
        //     //给ul无序列表超链接设置字体大小和颜色
        //     $('ul a').css('color','red')
        //              .css('fontSize','26px')
        //     //给ul无序列表子元素超链接设置无下划线
        //     $('ul>a').css('textDecoration','none')
        //     //给id为three的li元素后面兄弟设置颜色为橙色
        //     $('#three+li').css('color','orange');
        //     //给id为three的li元素后面所有兄弟设置颜色为橙色
        //     $('#three~li').css('color','orange');
        // })

        //结构伪类选择器
        // $(function(){
        //     //选择第一个li为红色
        //     $('ul li:first').css('color','red');
        //     //选取第三个后面的所有
        //     $('ul li:gt(2)').css('fontSize','30px');
        // })

        //属性选择器
        // $(function(){
        //     //给有price属性且以2开头的设置属性
        //     // $('li[price^2]').css('color','orange')
        //     $('li[price*=2]').css('color','orange')
        // })

        // $(function(){
        //     //选取不包含a样式的层
        //     $('div :not(.a)').css('width','100px')
        //                    .css('height','100px')
        //                    .css('border','1px solid red');
        // })

        $(function(){
            $('div:parent').css('width','100px')
                           .css('height','100px')
                           .css('border','1px solid red');
        })
    </script>
</body>
</html>